<template>
  <ElDialog v-model="dialogVisible" title="题目详情" :width="800" align-center>
    <ElTabs v-model="activeTab" @tab-change="tabChange">
      <ElTabPane
        v-for="(item, index) in tabsItems"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
      </ElTabPane>
    </ElTabs>
    <!-- 基础信息 -->
    <template v-if="activeTab == 'info'">
      <ElDescriptions :border="true">
        <ElDescriptionsItem label="语向" :label-width="80" label-align="center">
          <ElTag :type="subjectInfoData.lanDirTagType">{{ subjectInfoData.lanDirName }}</ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="难度系数"
          ><ElTag :type="subjectInfoData.rateTagType">{{
            subjectInfoData.rateName
          }}</ElTag></ElDescriptionsItem
        >
        <ElDescriptionsItem label="领域">{{ subjectInfoData.territoryName }}</ElDescriptionsItem>
        <ElDescriptionsItem label="原文" :span="3" :label-width="80" label-align="center">{{
          subjectInfoData.sourceText
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="译文" :span="3" :label-width="80" label-align="center">{{
          subjectInfoData.translationText
        }}</ElDescriptionsItem>
        <ElDescriptionsItem label="来源" :span="3" :label-width="80" label-align="center">{{
          subjectInfoData.from
        }}</ElDescriptionsItem>
      </ElDescriptions>
    </template>
    <template v-else>
      <ElDescriptions :border="true" :label-width="120">
        <ElDescriptionsItem
          v-for="(item, index) in extList"
          :key="index"
          :label="item.title"
          :span="3"
          label-align="center"
        >
          <div v-html="item.content"></div>
        </ElDescriptionsItem>
      </ElDescriptions>
    </template>
  </ElDialog>
</template>
<script setup lang="ts">
  import { apiGetSystemConfig } from '@/api/auth'
  import { apiGetSubject, apiGetSubjectBindExt } from '@/api/subject'
  import { systemConfigType, tagType } from '@/maps'
  import { isEmpty } from '@/utils'
  import { TabPaneName } from 'element-plus'
  import type { EpPropMergeType } from 'element-plus/es/utils/vue/props/types'

  const props = withDefaults(
    defineProps<{
      //显示状态
      visible: boolean
      //题目id
      subjectId: number
    }>(),
    {
      visible: false
    }
  )

  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void
  }>()

  // 对话框显示控制
  const dialogVisible = computed({
    get: () => props.visible,
    set: (value) => emit('update:visible', value)
  })

  //标签页属性
  interface tabsItemsBody {
    //名称
    name: string
    //显示名称
    label: string
  }

  //标签页
  const tabsItems = ref<tabsItemsBody[]>()

  //激活的标签页属性
  const activeTab = ref('info')

  //题目详情列
  interface subjectInfoBody {
    //语向tag标签样式
    lanDirTagType:
      | EpPropMergeType<
          StringConstructor,
          'primary' | 'success' | 'warning' | 'info' | 'danger',
          unknown
        >
      | undefined
    //语向
    lanDirName: string
    //难度系数类型
    rateTagType:
      | EpPropMergeType<
          StringConstructor,
          'primary' | 'success' | 'warning' | 'info' | 'danger',
          unknown
        >
      | undefined
    //难度系数
    rateName: string
    //领域
    territoryName: string
    //原文
    sourceText: string
    //译文
    translationText: string
    //来源
    from: string
  }

  //题目详情
  const subjectInfoData = ref<subjectInfoBody>({
    lanDirTagType: 'primary',
    lanDirName: '',
    rateTagType: 'primary',
    rateName: '',
    territoryName: '',
    sourceText: '',
    translationText: '',
    from: ''
  })

  //扩展属性内容
  const extList = ref<
    {
      //内容
      content?: string
      //名称
      name?: string
      //标题
      title?: string
    }[]
  >()

  //扩展属性
  const extObj = ref<any>({})

  //获取题目数据
  const getSubjectData = async () => {
    const resSubject: any = await apiGetSubject({
      id: props.subjectId
    })
    if (resSubject) {
      subjectInfoData.value.lanDirTagType = tagType[resSubject.lanDir]
      subjectInfoData.value.lanDirName = resSubject.lanDirName
      subjectInfoData.value.rateTagType = tagType[resSubject.rate]
      subjectInfoData.value.rateName = resSubject.rateName
      subjectInfoData.value.territoryName = resSubject.territoryName
      subjectInfoData.value.sourceText = resSubject.sourceText
      subjectInfoData.value.translationText = resSubject.translationText
      subjectInfoData.value.from = resSubject.from
    }
  }

  const getExtConfig = () => {
    tabsItems.value = []
    tabsItems.value?.push({ name: 'info', label: '基本信息' })
    apiGetSystemConfig(systemConfigType.subjectExt).then((res: any) => {
      const extList = Object.values(res)
      extList.forEach((item: any) => {
        tabsItems.value?.push({ name: 'ext_' + item.id, label: item.name })
      })
    })
  }

  //获取扩展属性内容
  const getExtData = async () => {
    extObj.value = {}
    const bindExtRes = await apiGetSubjectBindExt(props.subjectId)
    if (!isEmpty(bindExtRes) && Array.isArray(bindExtRes)) {
      bindExtRes.forEach((item) => {
        if (!extObj.value[item.subjectExtType]) {
          extObj.value[item.subjectExtType] = []
        }
        extObj.value[item.subjectExtType].push({
          content: item.subjectExtContent,
          title: item.subjectExtTitle,
          name: item.subjectExtTypeName
        })
      })
    }
  }

  //tab点击事件
  const tabChange = (tab: TabPaneName) => {
    if (tab != 'info') {
      const tabValue = tab as string
      const tabExt = tabValue.split('_')
      const tabIndex = tabExt[1]
      const list = extObj.value[tabIndex]
      extList.value = list
      console.log(extList.value)
    }
  }

  watch(
    () => props.visible,
    (newValue) => {
      if (newValue) {
        activeTab.value = 'info'
        //获取扩展属性配置
        getExtConfig()
        //获取详情数据
        getSubjectData()
        //获取扩展属性内容
        getExtData()
      }
    }
  )
</script>
